<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>椭圆运动效果</title>
	<style type="text/css">
		body {
			background-color: #eaf0f2;
		}
		h1{
			font-size: 14px;
			font-family: "Microsoft Yahei";
			text-align: center;
		}
		body{
		  background:#000;
		}
		.butterfly{
		  width:150px;
		  height:142px;
		  margin: 0 auto;
		  -webkit-transform-origin:center 150%;
		  transform-origin:center 150%;
		  -webkit-animation:circle 2s infinite linear;
		  animation:circle 2s infinite linear;
		}
		.butterfly img{
		  width:100%;
		  height:auto;
		}
		figure{
		  margin-left: 200px;
		  -webkit-animation:updown 1s infinite ease-in-out alternate;
		  animation:updown 1s infinite ease-in-out alternate;
		  /* -webkit-animation-delay:-.5s;  */
		}
		@-webkit-keyframes updown{
		    to{
		      -webkit-transform:translateY(200px);
		      transform:translateY(200px);
		    }
		}
		@-webkit-keyframes circle{
		  to{
		  	-webkit-transform:rotate(-1turn);
		    transform:rotate(-1turn);
		  }
		}
	</style>
</head>
<body>
	<h1>请使用webkit内核标准浏览器查看效果</h1>
	<figure>
	  <div class="butterfly">
	    <img src="http://p7.qhimg.com/t01a4c54ef5309e561c.png" alt="" />
	  </div>
	</figure>
</body>
</html>